
import React from "react";
import {Statistic, Row, Col, InputNumber, Card, Button, Popconfirm, message} from 'antd';
import {numberIndex, numberUpdate} from "../../../api/work/GenerateApi";

/**
 * 数值录入页面
 */
class Index extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            field:null,
            value:0,
            uri:"",
            data:[]
        };
    }

    componentDidMount() {
        let uri = this.getUri();
        if (uri){
            this.setState({
                uri:uri
            },function () {
                this.fetchRecord()
            })
        }
    }

    getUri = (nextProps = null) => {
        let uri = nextProps ? nextProps.match.params.uri : this.props.match.params.uri;
        if (uri){
            return uri.replace(/\./g,"\/");
        }else {
            message.error("uri缺失")
            return false;
        }
    };

    //解决参数改变组件不更新的问题
    componentWillReceiveProps = (nextProps) => {
        let that = this;
        let new_uri = this.getUri(nextProps);
        if (this.state.uri !== new_uri){
            this.setState({
                uri:new_uri
            },function () {
                that.fetchRecord()
            })
        }

    };

    fetchRecord = () => {
        numberIndex({page:this.state.uri}).then(response => {
            if (response.data.code === 200){
                this.setState({
                    data:response.data.data
                })
            }
            console.log(response.data)
        })
    };

    updateValue = (field) => {
        console.log(field)
    };

    //提交
    handleOnConfirm = () => {
        let data = {page:this.state.uri};
        data[this.state.field] = this.state.value;
        numberUpdate(data).then(response => {
            if (response.data.code === 200){
                message.success("操作成功");
                this.fetchRecord();
            }
        });
        console.log(this.state.field,this.state.value)
    };

    handleOnchange = (value) => {
        this.setState({
            value:value
        })
    };

    renderPopConfirmTitle = () => {
        return (
            <InputNumber style={{width:"106px"}} defaultValue={this.state.value} onChange={this.handleOnchange} />
        )
    };

    renderTitle = (title,field,value) => {
        return (
            <Popconfirm icon={false} placement="right" title={this.renderPopConfirmTitle()} onConfirm={this.handleOnConfirm} okText="确定" cancelText="取消">
                <Button onClick={() => {this.setState({field:field,value:value})}} style={{padding:0}} type={"link"}>{title}</Button>
            </Popconfirm>
        )
    };

    render() {
        return (
            <Row gutter={[16,16]} style={{marginBottom: 20}}>
                {this.state.data.map((item,index) => (
                    <Col span={6} key={index}>
                        <Card>
                            <Statistic title={this.renderTitle(item["label"],item["field"],item["value"])} suffix={item["suffix"]} value={item["value"]} />
                        </Card>
                    </Col>
                ))}
            </Row>
        );
    }
}

export default Index;


